<template>
  <div class="admin-container">
    <!-- 搜索卡片 -->
    <div class="search-card">
      <el-form :model="searchForm" label-width="100px" class="search-form">
        <div class="search-grid">
          <el-form-item label="配置名称">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入配置名称"
              prefix-icon="Document"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="显示菜单">
            <el-select
              v-model="searchForm.is_menu"
              placeholder="全部状态"
              style="width: 200px"
              clearable
            >
              <el-option label="全部" value="" />
              <el-option label="显示" :value="1" />
              <el-option label="隐藏" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getLists" :icon="Search"> 搜索 </el-button>
            <el-button @click="resetSearch" :icon="RefreshRight" plain> 重置 </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 表格卡片 -->
    <div class="table-card">
      <div class="table-header">
        <div class="table-title">
          <el-icon><Setting /></el-icon>
          <span>配置列表</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleAdd" :icon="Plus">添加配置</el-button>
        </div>
      </div>

      <!-- 现代化表格 -->
      <el-table
        :data="lists"
        style="width: 100%"
        empty-text="暂无数据"
        class="modern-table"
        :header-cell-style="{ background: '#f9fafb', color: '#374151', fontWeight: 600 }"
        v-loading="loading"
      >
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column label="配置名称" align="center" prop="name" />
        <el-table-column prop="sort" label="排序" align="center" />
        <el-table-column label="显示菜单" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.is_menu === 1 ? 'success' : 'info'">
              {{ scope.row.is_menu === 1 ? '显示' : '隐藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template #default="scope">
            <div class="time-info">
              <div>{{ formatDate(scope.row.created_at) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template #default="scope">
            <div class="time-info">
              <div>{{ formatDate(scope.row.updated_at) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="280">
          <template #default="scope">
            <div class="action-buttons">
              <el-button size="small" type="primary" :icon="Edit" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button size="small" type="success" icon="List" @click="handleDataList(scope.row)"
                >配置列表</el-button
              >
              <el-button size="small" type="danger" :icon="Delete" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          v-model:current-page="pager.page"
          v-model:page-size="pager.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          :page-sizes="[10, 30, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="getLists"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getConfigListsApi, deleteConfigApi } from '@/api/config'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Search, RefreshRight, Setting } from '@element-plus/icons-vue'

const router = useRouter()
const loading = ref(false)

const lists = ref([])

const searchForm = ref<any>({
  name: '',
  is_menu: '',
})

const pager = reactive<any>({
  page: 1,
  page_size: 10,
  total: 0,
})

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

const getLists = async () => {
  loading.value = true
  try {
    const { data } = await getConfigListsApi({
      name: searchForm.value.name,
      config: searchForm.value.config,
      is_menu: searchForm.value.is_menu,
      page: pager.page,
      page_size: pager.page_size,
    })
    lists.value = data.list || []
    pager.total = data.total || 0
    pager.page_size = data.per_page || 10
    pager.page = data.current_page || 1
  } catch (error) {
    console.error('获取配置列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleAdd = () => {
  router.push('/config/configEdit')
}

const handleEdit = (row: any) => {
  router.push(`/config/configEdit?id=${row.id}`)
}
const handleDataList = async (row: any) => {
  router.push(`/config/configData?id=${row.id}`)
}

const handleDelete = async (row: any) => {
  ElMessageBox.confirm('确定要删除该配置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteConfigApi(row.id).then(() => {
      ElMessage.success('删除成功')
      getLists()
    })
  })
}

const resetSearch = () => {
  searchForm.value = {
    name: '',
    config: '',
    is_show: '',
  }
  getLists()
}

const handleCurrentChange = (val: number) => {
  pager.page = val
  getLists()
}

getLists()
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 搜索卡片 */
.search-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.search-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* 表格卡片 */
.table-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.table-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* 现代化表格 */
.modern-table {
  flex: 1;
}

:deep(.el-table__header-wrapper) {
  border-radius: 8px 8px 0 0;
}

:deep(.el-table__body-wrapper) {
  border-radius: 0 0 8px 8px;
}

/* 配置信息样式 */
.config-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.config-name {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
}

.config-key {
  font-size: 11px;
  color: #6b7280;
  font-family: monospace;
}

/* 时间信息样式 */
.time-info {
  text-align: center;
}

.time-label {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* 分页样式 */
.pagination-container {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-grid .el-form-item {
    width: 100%;
  }

  .search-grid .el-input,
  .search-grid .el-select {
    width: 100% !important;
  }
}
</style>
